<template>
  <div class="hamburger-container" @click="handToggle">
    <!-- 菜单栏展开图标 -->
    <Fold id="guide-hamburger" class="hamburger" v-if="$store.getters.sidebarOpend"/>
    <!-- 菜单栏收缩图标 -->
    <Expand  id="guide-hamburger" class="hamburger" v-if="!$store.getters.sidebarOpend"/>
  </div>
</template>

<script setup >
import {computed} from "vue";
import {useStore} from 'vuex'

const store = useStore()
// 触发点击事件
const handToggle = () =>{
  //调用vuex中的triggerSidebarOpend方法 修改控制菜单收缩展示的变量
  store.commit('app/triggerSidebarOpend')
}

</script>

<style lang='scss' scoped>
.hamburger-container{
  padding: 0 16px;
  .hamburger{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
}
</style>